<template>
  <div class="header-big-box">
    <div class="left">
      <div class="title" @click="goWelcome">
        欢迎访问牛逼二手
      </div>
    </div>
    <div class="right">
      <div class="head-image-box">
        <img :src="user.headImage || 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'" class="head-image"/>
      </div>
      <div class="nick-name-box">
        {{ user.nickName || "-" }}
        <el-link class="logout" type="primary" @click="logout">
          退出登录
        </el-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {toRaw} from "vue";
import db, {PERMISSION_KEY, ROLE_KEY, TOKEN_KEY, USER_KEY} from "@/utils/db";

const store = useStore();

const router = useRouter();

const user = toRaw(store.state.user);

const goWelcome = () => {
  router.push(`/back/welcome`);
}

const logout = () => {
  db.remove(TOKEN_KEY);
  db.remove(USER_KEY);
  db.remove(PERMISSION_KEY);
  db.remove(ROLE_KEY);
  router.replace("/");
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>